<template>
	<div>
		<el-container>
			<head-top></head-top>
			<el-header>
				<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list">
					<el-form-item label="服务名称">
						<el-input v-model="formInline.serviceName" placeholder="" @keyup.enter.native="onSearch"></el-input>
					</el-form-item>
					<el-form-item label="访问地址">
						<el-input v-model="formInline.serviceUrl" placeholder="" @keyup.enter.native="onSearch"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true" class="form-inline form-menu-function">
					<el-button type="primary" icon="el-icon-edit" @click="create">新增</el-button>
				</el-form>
			</el-header>
			<el-main>
				<el-table :data="tableData" :row-class-name="tableRowClassName">
					<el-table-column prop="id" label="序号" width="100">
					</el-table-column>
					<el-table-column prop="serviceUrl" label="服务地址" width="300">
						<template slot-scope="scope">
							<a target="_blank" :href="tableData[scope.$index].serviceUrl" v-show="tableData[scope.$index].serviceUrl">{{tableData[scope.$index].serviceName}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="serviceAccount" label="服务账号" width="200">
					</el-table-column>
					<el-table-column prop="serviceAccountPassword" label="服务密码" width="300">
					</el-table-column>
					<!-- <el-table-column prop="status" label="状态" width="300"> -->
					<el-table-column prop=""></el-table-column>
					</el-table-column>
					<el-table-column label="操 作" width="400">
						<template slot-scope="scope">
							<el-button size="medium" type="info" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="medium" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>

			</el-main>
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="dialogform" :rules="rules2" ref="dialogform">
					<el-form-item label="服务名称" :label-width="formLabelWidth">
						<el-input v-model="dialogform.serviceName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="服务访问地址" :label-width="formLabelWidth" prop="">
						<el-input v-model="dialogform.serviceUrl" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="服务账号" :label-width="formLabelWidth">
						<el-input v-model="dialogform.serviceAccount" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="服务密码" :label-width="formLabelWidth">
						<el-input v-model="dialogform.serviceAccountPassword" autocomplete="off"></el-input>
					</el-form-item>


				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormsubmit('dialogform')">确 定</el-button>
				</div>
			</el-dialog>
		</el-container>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import {
		mapGetters
	} from 'vuex';

	import {
		update,
		list,
		del,
		search
	} from '@/api/serviceurl'

	export default {
		data() {
			return {
				formLabelWidth: "20",
				formInline: {

				},
				dialogform: {
					
				},
				dialogFormVisible: false,
				title: "服务编辑",
				tableData: [],
				count: 0,
				currentPage: 1,
				pageSize: 10,
				rules2: {

				},
				activeNames: [],
				// activeNames: ['1','2','3','4','5'],
			}
		},
		created() {
			this.onSearch();

		},
		computed: {
			...mapGetters({
				deploytypeoptions: 'getDeployTypeOptions',
				deploykubenetesnameoptions: 'getDeploykubenetesnameoptions',
				equipmentinfooptions: 'getEquipmentInfoOPtions',
			}),
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val;
				this.onSearch();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.onSearch();
			},
			create() {
				this.dialogform = {}
				this.dialogFormVisible = true;
			},
			onSearch() {
				search(this.formInline, this.pageSize, this.currentPage)
					.then((response) => {
						this.inittable(response)
					})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.status == 1) {
					return 'warning-row';
				} else if (row.status == 0) {
					return 'success-row';
				}
				return '';
			},
			handleEdit(index, row) {
				console.dir(row)
				this.dialogform = {}
				this.dialogform = JSON.parse(JSON.stringify(row));
				this.dialogFormVisible = true

			},
			async handleDelete(index, row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del(row)
						.then((response => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.onSearch()
						}))
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			inittable(response) {
				this.tableData = response.items;
				this.count = response.totalNum;
			},
			dialogFormsubmit(formName) {
				console.dir(this.$refs[formName])
				this.$refs[formName].validate((valid) => {
					if (valid) {
						update(this.dialogform)
							.then((response) => {
								console.log(response)
								this.dialogFormVisible = false;
								this.onSearch();
							})
					}
				})
			},
			addDeployItem() {
				console.log("this.dialogform.cmdbDeployList: " + this.dialogform.cmdbDeployList);
				this.dialogform.cmdbDeployList.push({
					deployName: '点我修改',
				})
			},
			deleteDeployItem(item, index) {
				this.dialogform.cmdbDeployList.splice(index, 1)
			},
			formatterdeployType(row, column, cellValue, index) {
				return this.deploytypeoptions[cellValue]
			},
			formatterdeployHostname(row, column, cellValue, index) {
				let hostname = '';
				if (cellValue) {
					let hostValue = cellValue.split(";")
					if (hostValue) {
						hostValue.forEach((item) => {
							hostname = hostname + item + "\n"
						})
					}

				}
				return hostname;
			},
			


		},
		components: {
			headTop,
		},
	};
</script>

<style>
	.el-table .cell {
		white-space: pre-line !important;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 120px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 30%;
	}

	.demo-table-expand el-input {
		width: 500px;
	}
</style>
